<!DOCTYPE html PUBLIC>
<html lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title>
			string set specs </title>
		<script src="../../../dist/paged.polyfill.js"></script>
		<style>
			:root {
				font-size: 18px;
			}

			* {
				font-family: Times New Roman, sans-serif;
			}

			h1 {
				string-set: alphabet content(text);
				font-size: 20px;
				margin-bottom: 0;
			}

			@page {
				size: 140mm 200mm;
				margin: 20mm 20mm;

				/* border: solid 1px black; */
				@bottom-left {
					content: counter(page);
				}

				@bottom-center {
					content: string(alphabet);
				}
			}

		


			p {
				line-height: 22px;
			}

			h1 {
				font-size: 24px;
				line-height: 25px;
				margin-top: 0;
			}
		</style>
	</head>

	<body>
		<section>
			<h1>aaa</h1>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo.
			</p>
			<h1>bbb</h1>
			<p>
				Nulla dignissim pellentesque magna ac maximus. Integer id tincidunt erat. Sed elementum posuere augue, quis pharetra mi vehicula in.
			</p>
			<h1>ddd</h1>
			<p>
				Donec auctor libero a lorem egestas consequat. Cras ac lacinia ipsum. Donec non elementum purus, et porta eros. Cras ullamcorper mi eu semper aliquam.
			</p>
			<h1>eee</h1>
			<p>
				Morbi cursus eget enim eleifend tincidunt. In vel odio gravida, hendrerit diam ut, fringilla urna.
			</p>
			<h1>fff</h1>
			<p>
				Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
			</p>
			<p>
				Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
			</p>
			<p>
				Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
			</p>
			<p>
				Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
			</p>
			<p>
				Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
			</p>
			<p>
				Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
			</p>
			<p>
				Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
			</p>
			<p>
				Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
			</p>
			<p>
				Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
			</p>
			<p>
				Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus.
			</p>
			<h1>ggg</h1>
			<p>
				In feugiat euismod massa sagittis dictum. Nullam eu nisl eu elit laoreet tincidunt id sed ligula. Praesent vulputate faucibus nibh, ut ultrices nunc aliquam nec.
			</p>
			<p>
				In feugiat euismod massa sagittis dictum. Nullam eu nisl eu elit laoreet tincidunt id sed ligula. Praesent vulputate faucibus nibh, ut ultrices nunc aliquam nec.
			</p>
			<h1>hhh</h1>
			<p>
				Proin eu quam id arcu interdum laoreet nec at urna. Vivamus non sem quis dolor sagittis facilisis. Nunc quis urna non neque sollicitudin hendrerit.
			</p>
			<h1>iii</h1>
			<p>
				Etiam molestie sed orci sed suscipit. Donec ipsum est, venenatis ut nisl ut, viverra auctor diam. Cras vestibulum lacus vel nunc dapibus aliquam.
			</p>
			<h1>jjj</h1>
			<p>
				Aliquam eget massa lobortis, maximus leo ac, iaculis quam. Sed non aliquet eros. Integer ultrices consequat tortor eget ullamcorper.
			</p>
			<p>
				Aliquam eget massa lobortis, maximus leo ac, iaculis quam. Sed non aliquet eros. Integer ultrices consequat tortor eget ullamcorper.
			</p>
			<p>
				Aliquam eget massa lobortis, maximus leo ac, iaculis quam. Sed non aliquet eros. Integer ultrices consequat tortor eget ullamcorper.
			</p>
			<h1>kkk</h1>
			<p>
				Aliquam erat volutpat. Aenean ornare elit magna, et efficitur massa dapibus sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus.
			</p>
			<h1>lll</h1>
			<p>
				Vivamus vel velit vel metus bibendum luctus ut vitae tortor. Nullam at ante eu felis ultrices ultrices at in diam. Vivamus vel velit vel metus bibendum luctus ut vitae tortor. Nullam at ante eu felis ultrices ultrices at in diam. Pellentesque eleifend leo sapien, vel commodo orci mollis vel.
			</p>
			<h1>mmm</h1>
			<p>
				Nullam at ante eu felis ultrices ultrices at in diam. Pellentesque eleifend leo sapien, vel commodo orci mollis vel. Nam eros tellus, hendrerit ut rhoncus sed, aliquet et felis. Cras a ex malesuada, fringilla magna elementum, cursus purus.
			</p>
			<h1>nnn</h1>
			<p>
				Aliquam eget massa lobortis, maximus leo ac, iaculis quam. Sed non aliquet eros. Nulla dignissim pellentesque magna ac maximus. Integer id tincidunt erat. Sed elementum posuere augue, quis pharetra mi vehicula in.
			</p>
			<h1>ooo</h1>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo.
			</p>
			<h1>ppp</h1>
			<p>
				Donec auctor libero a lorem egestas consequat. Cras ac lacinia ipsum. Donec non elementum purus, et porta eros. Cras ullamcorper mi eu semper aliquam.
			</p>
			<h1>qqq</h1>
			<p>
				Donec auctor libero a lorem egestas consequat. Cras ac lacinia ipsum. Donec non elementum purus, et porta eros. Cras ullamcorper mi eu semper aliquam.
			</p>
			<h1>rrr</h1>
			<p>
				Donec auctor libero a lorem egestas consequat. Cras ac lacinia ipsum. Donec non elementum purus, et porta eros. Cras ullamcorper mi eu semper aliquam.
			</p>
			<h1>sss</h1>
			<p>
				Donec auctor libero a lorem egestas consequat. Cras ac lacinia ipsum. Donec non elementum purus, et porta eros. Cras ullamcorper mi eu semper aliquam.
			</p>
		</section>
	</body>

</html>